Google Charts API ব্যবহার করে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন এবং ডেটা বাইন্ডিংয়ের মাধ্যমে চার্টে প্রদর্শিত তথ্য পরিচালনা করতে পারেন। এখানে আমরা Chart Type এবং Data Binding এর ভূমিকা এবং কিভাবে এগুলি ব্যবহার করতে হয় তা আলোচনা করব।

Chart Type

Google Charts API-এ Chart Type দ্বারা আপনি যে ধরনের চার্ট তৈরি করবেন তা নির্ধারণ করা হয়। বিভিন্ন ধরনের চার্ট বিভিন্ন প্রয়োজনে ব্যবহার করা হয়। এখানে কিছু জনপ্রিয় Chart Types দেওয়া হলো:

1. Pie Chart (পাই চার্ট)

Pie Chart মূলত ডেটার একটি অংশের তুলনা দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত শতাংশের ভিত্তিতে ডেটা দেখায়।

chartType = 'PieChart';

2. Bar Chart (বার চার্ট)

Bar Chart সাধারণত বিভিন্ন ক্যাটেগরি বা গ্রুপের মধ্যে তুলনা করতে ব্যবহৃত হয়, যেখানে প্রতিটি ক্যাটেগরি একটি বার দ্বারা উপস্থাপিত হয়।

chartType = 'BarChart';

3. Line Chart (লাইন চার্ট)

Line Chart সাধারণত সময়ের সাথে ডেটার পরিবর্তন বা প্রবণতা প্রদর্শনের জন্য ব্যবহৃত হয়।

chartType = 'LineChart';

4. Column Chart (কলাম চার্ট)

Column Chart Bar Chart এর মতো, তবে এটি প্রতিটি তুলনা কলামের আকারে প্রদর্শিত হয়।

chartType = 'ColumnChart';

5. Area Chart (এলাকা চার্ট)

Area Chart লাইন চার্টের মতো, তবে এখানে লাইনটির নিচের অংশ রঙিন থাকে এবং একটি ভলিউমের ধারণা দেয়।

chartType = 'AreaChart';

6. Combo Chart (কোম্বো চার্ট)

Combo Chart একাধিক চার্টের সংমিশ্রণ হতে পারে। যেমন একটি চার্টে বার এবং লাইন একসাথে প্রদর্শন করা হয়।

chartType = 'ComboChart';

7. Bubble Chart (বাবল চার্ট)

Bubble Chart প্রতিটি ডেটা পয়েন্টকে একটি বুদ্বুদ দ্বারা উপস্থাপন করে, যেখানে বুদ্বুদটির আকার এবং রঙ অতিরিক্ত ডেটা বা পরিমাপ তুলে ধরে।

chartType = 'BubbleChart';

8. Gantt Chart (গ্যান্ট চার্ট)

Gantt Chart প্রজেক্ট ম্যানেজমেন্ট এবং সময়সূচী প্রদর্শনের জন্য ব্যবহৃত হয়।

chartType = 'Gantt';

Data Binding

Data Binding একটি প্রক্রিয়া যা ডেটা এবং ইউআই (User Interface) এর মধ্যে যোগাযোগ তৈরি করে। Angular এর মাধ্যমে Google Charts এর ডেটা বাইন্ডিং খুবই সহজ। Google Charts API তে Data Binding এর মাধ্যমে আপনি ডেটা এবং চার্টের মধ্যে সম্পর্ক স্থাপন করতে পারেন। Angular এ ডেটা বাইন্ডিংয়ের মাধ্যমে ডেটা পরিবর্তন হলে তা চার্টে স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়।

Data Binding এর উদাহরণ

ধরা যাক, আমরা একটি Pie Chart তৈরি করছি, যেখানে ডেটা chartData অ্যারে থেকে আসে এবং আমাদের chartType এবং chartOptions কাস্টমাইজ করা থাকে।

1. Component ফাইল (app.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Google Charts with Data Binding';

  // Chart Type
  chartType = 'PieChart';

  // Chart Data (ডেটা বাইন্ডিং)
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ];

  // Chart Options (কাস্টম অপশন)
  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4, // Doughnut style
    width: 600,
    height: 400
  };

  // ডেটা পরিবর্তন করার ফাংশন
  updateChartData() {
    this.chartData = [
      ['Task', 'Hours per Day'],
      ['Work', 6],
      ['Eat', 3],
      ['Commute', 2],
      ['Watch TV', 1],
      ['Sleep', 12]
    ];
  }
}

2. HTML ফাইল (app.component.html):

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

<!-- একটি বাটন যা ডেটা আপডেট করবে -->
<button (click)="updateChartData()">Update Chart Data</button>

এখানে, chartData হচ্ছে যে ডেটা চার্টে প্রদর্শিত হবে, এবং chartType ও chartOptions হচ্ছে চার্টের কাস্টমাইজেশন।

যখন updateChartData() ফাংশনটি কল করা হবে, তখন chartData অ্যারে পরিবর্তন হবে এবং নতুন ডেটা চার্টে স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে।

Data Binding এর প্রকারভেদ

1. One-way Data Binding: ডেটা শুধুমাত্র একদিকে প্রবাহিত হয় (যেমন: কম্পোনেন্ট থেকে টেমপ্লেটে)।

   উদাহরণ:

   <h1>{{ title }}</h1>
   

2. Two-way Data Binding: ডেটা দুটি দিকে প্রবাহিত হয় (কম্পোনেন্ট থেকে টেমপ্লেটে এবং টেমপ্লেট থেকে কম্পোনেন্টে)।

   উদাহরণ:

   <input [(ngModel)]="title">
   

Chart Data পরিবর্তন এবং Update

Angular তে ডেটা বাইন্ডিংয়ের মাধ্যমে আপনি ডেটা পরিবর্তন করে তা সোজা চার্টে রিফ্লেক্ট করতে পারেন। যেমন একটি বোতাম ক্লিকের মাধ্যমে ডেটা পরিবর্তন করা:

updateChartData() {
  this.chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 6],
    ['Eat', 3],
    ['Commute', 2],
    ['Watch TV', 1],
    ['Sleep', 12]
  ];
}

এটি করলে, Pie Chart-এ স্বয়ংক্রিয়ভাবে নতুন ডেটা প্রদর্শিত হবে।

সারাংশ

Chart Type এবং Data Binding এর মাধ্যমে আপনি Google Charts API তে বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন এবং ডেটাকে সহজেই পরিবর্তন করে তা চার্টে প্রতিফলিত করতে পারেন। Angular এর ডেটা বাইন্ডিংয়ের মাধ্যমে আপনি কম্পোনেন্টের ডেটা পরিবর্তন করলে তা স্বয়ংক্রিয়ভাবে টেমপ্লেটে এবং চার্টে প্রদর্শিত হয়। এটি ডেটা ভিজুয়ালাইজেশনের জন্য অত্যন্ত কার্যকরী এবং ইন্টারঅ্যাকটিভ উপায়।